<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box3 {
  width:100px;
  height:100px;
  background-color:red;
}
.box2 {
  width:200px;
  height:200px;
  background-color:blue;
}
.box1 {
  width:300px;
  height:300px;
  background-color:green;
}
</style>
</head>

<body>
<div class="box1"><!-- 有定位的父级，简称定位父级(干爹) -->
  <div class="box2"><!-- 结构父级（亲爹） -->
    <div class="box3"></div><!-- 绝对定位元素（儿子） -->
  </div>
</div>
<pre>

绝对定位
    1.将    position:absolute; top:0;left:0;    加给box2或box1
      >>>>  绝对定位元素会携带自己的子级元素一起偏移
    2.绝对定位一般是配合相对定位使用（做干爹）
      将  绝对定位    position:absolute; right:0;bottom:0;    加给box3
      将  相对定位  position:relative;  加给box2或box1或同时加上
      >>>> 绝对定位元素会在遇到第一个有相对定位元素停下
</pre>
</body>
</html>
